<template>
    <div>
      <el-form style="margin: 10px 0" :model="queryForm" inline>
        <el-form-item label="用户名">
          <el-input suffix-icon="el-icon-position" style="width: 200px" v-model="queryForm.nickname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="帖子标题">
          <el-input suffix-icon="el-icon-position" style="width: 200px" v-model="queryForm.title" placeholder="请输入帖子标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="mll-5" type="primary" @click="fetchLove">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="mll-5" type="warning" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="mll-5" type="danger" @click="deleteSelected"
            :disabled="!this.selectedIds.length">批量删除</el-button>
        </el-form-item>
      </el-form>
  
      <el-card class="box-card">
        <el-table :data="loveList" script style="width:100%" @selection-change="handelSelectionChange"
          :row-key="row => row.id">
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column prop="id" label="收藏id" align="center" />
          <el-table-column prop="postId" label="帖子id" align="center" />
          <el-table-column prop="title" label="帖子标题" align="center" />
          <el-table-column prop="userId" label="用户id" align="center" />
          <el-table-column prop="nickname" label="用户昵称" align="center" />
          <el-table-column prop="createTime" label="收藏时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="deleteLove([scope.row.id])">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration" />
          <div style="padding: 10px 0; text-align: center">
            <el-pagination @current-change="handelPageChange" :current-page="queryForm.pageNo"
              :page-size="queryForm.pageSize" :total="total" :page-count="pages" layout="total,prev,pager,next,jumper">
            </el-pagination>
          </div>
        </div>
  
      </el-card>
    </div>
  </template>
  
  <script>
  import { getLovePage, deleteLoveByIds } from '@/api/love';
  import dayjs from 'dayjs';
  export default {
    data() {
      return {
        queryForm: {
          pageNo: 1,
          pageSize: 2,
          nickname: '',
          title: '',
        },
        loveList: [],
        total: 0,
        pages: 0,
        selectedIds: [],
  
      };
    },
    methods: {
      async fetchLove() {
        try {
          const response = await getLovePage(this.queryForm);
          this.loveList = response.data.list;
          this.total = Number(response.data.total);
          this.pages = Number(response.data.pages)
          console.info("list:", this.loveList)
          console.info("total:", this.total)
          console.info("pages:", this.pages)
        } catch (error) {
          console.error("查询失败", error);
        }
      },
      handelPageChange(page) {
        this.queryForm.pageNo = page;
        this.fetchLove();
      },
      reset() {
        this.queryForm.nickname = '';
        this.queryForm.title = '';
        this.fetchLove();
      },
      async deleteLove(ids) {
        try {
          await deleteLoveByIds(ids);
          this.$message.success("删除成功");
          if (this.loveList.length <= ids.length && this.queryForm.pageNo > 1) {
            this.queryForm.pageNo -= 1;
          }
          this.fetchLove();
        } catch (error) {
          this.$message.error("删除失败" + (error.message || "未知错误"))
        }
      },
      async deleteSelected() {
        if (this.selectedIds.length === 0) {
          this.$message.warning("请至少选择一条记录");
          return;
        }
        this.deleteLove(this.selectedIds);
      },
      handelSelectionChange(selected) {
        this.selectedIds = selected.map(item => item.id);
      },
    },
    mounted() {
      this.fetchLove();
    },
    filters:{
      formatDate(value){
        return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss'):'';
      }
    }
  }
  
  </script>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .mll-5 {
    margin-left: 10px;
  }
  </style>